﻿@{
    ViewBag.Title = "Index";
}

<h2>BAT</h2>

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawStackedBarChart);
    function drawStackedBarChart() {

        $.post('/bat/GetSalePerSkuPerCityDashBoard', {},
    function (data) {
        var tdata = new google.visualization.DataTable(data,0.5);
        
        var options = {
            title: "Product Summary By City",
            vAxis: { title: 'Volume' },
            hAxis: { title: 'City' },
            legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
            isStacked:true,
                    

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_SalePerSkuPerCity'));
        chart.draw(tdata, options);
    });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {

        $.post('/bat/GetSkuVolumeDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data, 0.5);

                var options = {
                    title: "Total Sales ",
                    legend: { position: 'right', textStyle: { color: 'blue', fontSize: 10} },
                    is3D: true
                };

                var chart = new google.visualization.PieChart(document.getElementById('chart_SkuVolumeDash'));
                chart.draw(tdata, options);
            });
    }
</script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawlineChart);
    function drawlineChart() {
        $.post('/bat/GetDailySkuVolumeDashBoard', {},
            function (data) {
                var tdata = new google.visualization.DataTable(data,0.5);

                var options = {
                    title: " Total Daily Sales",
                    legend: {position: 'right', textStyle: {color: 'blue', fontSize: 8}},
                    hAxis: { title: 'Period' },
                    vAxis: {title: 'Quantity', minValue: 0, baseline: 0},
                };
                var chart = new google.visualization.LineChart(document.getElementById('chart_DailySkuVolume_line_div'));
                chart.draw(tdata, options);
            });
    }
</script>
<table>
    <tr>
        <td>
            <div id="chart_SalePerSkuPerCity" style="width: 500px; height: 300px;">
            </div>
        </td>
        <td>
        <div id="chart_SkuVolumeDash" style="width: 500px; height: 300px;">
            </div>
        
        </td>
    </tr>
    <tr>
        <td>
            <div id="chart_DailySkuVolume_line_div" style="width: 500px; height: 300px;">
            </div>
        </td>
        <td>
        <div id="chart_bar_div" style="width: 500px; height: 300px;">
            </div>
        </td>
    </tr>
</table>

